<template>
  <ul class='tabs'>
    <li v-for="(item, index) in tabData" :key="index">
      <p class="lh60"><span></span> {{item.name}}</p>
      <div class="tab-item">
        <span v-for="(btn, btnindex) in item.children" :key="btnindex" :class="{active:btn.selected}" @click="chooseThis(item,btn)">{{btn.name}}</span>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      tabData:[
        {name:"学术成果统计",children:[
          {name:"学术论文",tablename:"outcomes_academic",selected:true,},
          {name:"专著教材",tablename:"outcomes_monograph",selected:false,},
          {name:"科研奖励",tablename:"outcomes_scientific",selected:false,},
          {name:"软著专利",tablename:"outcomes_patent",selected:false,},
          {name:"参加学术活动",tablename:"academic_activity",selected:false,},
          {name:"举办学术会议",tablename:"academic_meeting",selected:false,},
          {name:"竞赛奖励(研究生成果)",tablename:"graduate_award",selected:false,},
          {name:"荣誉表彰(研究生成果)",tablename:"honor",selected:false,},
          {name:"资格认证(研究生成果)",tablename:"qualification_authentication",selected:false,},
        ]},
        {name:"教学信息统计",children:[
          {name:"出版教材信息统计",tablename:"published_materials",selected:false},
          {name:"教研论文信息统计",tablename:"tr_thesis",selected:false},
          {name:"教研项目信息统计",tablename:"tr_project",selected:false},
          {name:"课改信息统计",tablename:"curriculum_change",selected:false},
          {name:"名师信息统计",tablename:"top_teacher",selected:false},
          {name:"指导学生参加学科竞赛统计",tablename:"guidance_competition",selected:false},
          {name:"教学成果推荐统计",tablename:"achievement_recommend",selected:false},
          {name:"其他教研项目",tablename:"other_project",selected:false},
        ]},
      ]
    };
  },
  methods: {
    chooseThis(item,btn){
      this.tabData.forEach(ele=>{
        ele.children.forEach(ele1=>{ele1.selected=false})
      })
      this.$set(btn,"selected",true)
      this.$emit("sendTableName",btn.tablename)
    }
  },
  created() {}
};
</script>
<style scoped>
.tabs{
  box-shadow: 1px 1px 10px 1px #eee;
  padding: 0px 30px 30px;
  margin-top: 20px;
}
.tab-item{
  display: flex;
  flex-wrap: wrap;
}
.lh60{
  line-height: 60px;
  list-style: circle;
}
.lh60 span{
  line-height: 0px;
  display: inline-block;
  width: 7px;
  height: 7px;
  position: relative;
  top: -2px;
  border-radius: 50%;
  background-color: #0066FF
}

.tab-item span{
  width: calc(100% / 6 - 5px);
  font-size: 14px;
  color: #666;
  text-align: center;
  line-height: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
  cursor: pointer;
}

.tab-item span.active{
  background-color: #3f9ce2;
  color: #fff;
}
.tab-item span:nth-child(6n+1){
  border-left: 1px solid #ddd;
}
.tab-item span:nth-child(1),.tab-item span:nth-child(2),.tab-item span:nth-child(3),.tab-item span:nth-child(4),.tab-item span:nth-child(5),.tab-item span:nth-child(6){
  border-top: 1px solid #ddd;
}
</style>